import { memo, ReactNode } from 'react';
import Header from '../../baseUI/header';
import { useGetUserInfo } from '../../service/user';
import { Button, Dialog, Image } from 'antd-mobile';
import OwnStyle from './style';
import { PieOutline, RightOutline } from 'antd-mobile-icons';
import { useNavigate } from 'react-router-dom';
import { routeItmeType } from '../../router';
import { AUTH_TOKEN } from '../../constant';
import Hr from '../../baseUI/hr';
import { DollarOutlined } from '@ant-design/icons';

type userCpmMapType = {
  title: string,
  leftIcon: ReactNode,
  rightIcon: ReactNode,
  result: (arg: any) => void,
}[]

const Own = memo(() => {
  const nav = useNavigate();
  const { loading, data } = useGetUserInfo();
  const editClick = () => {
    nav(`/${routeItmeType.EDIT_USER_INFO}/${data.id}`);
  };
  const outLoginClick = () => {
    Dialog.show({
      content: '确认要退出登录吗？',
      closeOnAction: true,
      actions: [
        [
          {
            key: 'cancel',
            text: '取消',
          },
          {
            key: 'delete',
            text: '确认',
            bold: true,
            danger: true,
            onClick() {
              localStorage.removeItem(AUTH_TOKEN);
              nav('/login');
            },
          },
        ],
      ],
    });
  };
  const userCpmMap: userCpmMapType = [
    {
      title: '预约课程',
      leftIcon: <PieOutline />,
      rightIcon: <RightOutline />,
      result: () => reserveClick(),
    },
    {
      title: '我的订单',
      leftIcon: <DollarOutlined />,
      rightIcon: <RightOutline />,
      result: () => orderClick(),
    },
  ];
  const reserveClick = () => {
    nav('/reserve');
  };
  const orderClick = () => {
    nav('/ownOrders');
  };
  return (
    <OwnStyle>
      <Header
        className="own_header"
        size="big"
        showReturnBtn={false}
        showSearch={false}
        title=""
      />
      <div className="user_content">
        <div className="user_info">
          {
            !loading && <>
              <div className="avater">
                <Image
                  src={
                    data?.avatar?.length > 0
                      ? (data?.avatar as string)
                      : 'https://danyun.oss-cn-chengdu.aliyuncs.com/brand.png'
                  }
                  alt="图片加载错误，请检查网络"
                  fit="cover"
                />
              </div>
              <div className="name">
                {data?.name?.length > 0 ? data.name : `淡云教育用户${data?.id}`}
              </div>
              <div className="goToEdit" onClick={editClick}>
                修改个人信息 <RightOutline />
              </div>
            </>
          }
        </div>
        <div className="userCpm">
          {
            userCpmMap.map((item) => (
              <div key={item.title}>
                <div className="item" onClick={item.result}>
                  <span>
                    {item.leftIcon}
                    &nbsp; {item.title}
                  </span>
                  {item.rightIcon}
                </div>
                <Hr />
              </div>
            ))
          }
        </div>
        <div className="outLogin" onClick={outLoginClick}>
          <Button>退出登录</Button>
        </div>
      </div>
    </OwnStyle>
  );
});

export default Own;
